<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let命令</title>
</head>
<body>
    <h1>let命令</h1>

    <script>
        // 1. 块级作用域
        {
            let a = 10;
            var b = 1;
        }
        // console.log(a); // ReferenceError: a is not defined
        console.log(b); // 1

        // 2. 不存在变量提升
        // console.log(foo); // ReferenceError
        let foo = 2;

        // 3. 暂时性死区（TDZ）
        var tmp = 123;
        if (true) {
            // console.log(tmp); // ReferenceError
            let tmp;
        }

        // 4. 不允许重复声明
        let a = 1;
        // let a = 2; // SyntaxError

        // 5. for循环中的let
        for (let i = 0; i < 3; i++) {
            let i = 'abc';
            console.log(i); // abc abc abc
        }

        // 实际应用示例
        // 1. 循环中的事件绑定
        const buttons = document.getElementsByTagName('button');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function() {
                console.log('第' + i + '个按钮被点击');
            });
        }

        // 2. 模块作用域
        {
            let moduleData = {
                count: 0,
                api: 'https://api.example.com'
            };

            function incrementCount() {
                moduleData.count++;
            }
        }
        // console.log(moduleData); // ReferenceError

        // 3. 避免全局变量污染
        {
            let userId = 123;
            let userName = '张三';
            
            function getUserInfo() {
                return {
                    id: userId,
                    name: userName
                };
            }
        }
    </script>
</body>
</html> 